<template>
  <div :class="{ 'w375': fun.isPc() }">
    <c-title text="商品详情"></c-title>
    <img :src="defaultPic" style="width: 100%;" />
    <div class="content">
      <div class="content-title">{{ dealBaseInfo && dealBaseInfo.dealTitle }}</div>
      <div class="wrap">
        <div class="nav">
          <img style="width: 100%;height: 100%;"
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image%2Fpreferential_bg.png" />
          <div class="ttt">
            <div class="preferential">券后价格</div>
            <div class="nav-bottom">
              <span class="fz-20" style="align-self: flex-end;margin-right:0.1563rem;">{{ $i18n.t('money') }}</span>
              <span class="fz-41 bold" style="line-height: 1;">{{ dealBaseInfo && dealBaseInfo.finalPrice }}</span>
              <span class="discount" v-if="dealBaseInfo && dealBaseInfo.discount">{{ dealBaseInfo && dealBaseInfo.discount
              }}</span>
            </div>
          </div>
        </div>
        <div class="wrap-right">
          <div>
            <div>美团价</div>
            <div class="bold">{{ $i18n.t('money') }}{{ dealBaseInfo && dealBaseInfo.realPrice ?
              (dealBaseInfo.realPrice).toFixed(2) : 0 }}
            </div>
          </div>
          <template v-if="dealBaseInfo && dealBaseInfo.couponPrice > 0">
            <div class="wrap-line"></div>
            <div>
              <div>其他立减</div>
              <div class="bold">{{ $i18n.t('money') }}{{ dealBaseInfo && dealBaseInfo.couponPrice ?
                (dealBaseInfo.couponPrice).toFixed(2)
                : 0
              }}</div>
            </div>
          </template>
        </div>
      </div>

      <div class="original-price">门市价<span style="text-decoration: line-through;">{{ $i18n.t('money') }}{{
        dealBaseInfo && dealBaseInfo.marketPrice }}</span></div>
    </div>



    <div class="reason" v-if="dealBaseInfo && dealBaseInfo.description">
      <div class="recommend-reason">推荐理由</div>
      <div>{{ dealBaseInfo && dealBaseInfo.description }}</div>
    </div>
    <!--群活码-->
    <div class="group-code" v-if="group_code && group_code.goods_entrance == 1">
      <div class="group-code-face" v-if="group_code.code_logo">
        <img :src="group_code.code_logo" />
      </div>
      <div class="group-code-content">
        <div class="group-code-name">{{ group_code.code_title }}邀请您添加专属福利群！</div>
        <div class="group-code-desc">{{ group_code.citation_copy }}</div>
      </div>
      <div class="group-code-button" @click="toGroupCode">去加群</div>
    </div>

    <!-- 门店 -->
    <div class="store-title">使用门店</div>

    <div class="store-box" v-if="city_id">
      <div class="store-box-left">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/meituan/meituan_store.png" alt="">
      </div>
      <div class="store-box-right">
        <div class="store-name">{{ shopInfo && shopInfo.shopName }}</div>
        <div style="display: flex;align-items: center;flex-wrap: wrap;">
          <div class="store-type">{{ shopInfo && shopInfo.cateName }}</div>
        </div>
        <div class="store-address">
          <span style="text-align: left;margin-right: 2.5625rem;">{{ shopInfo && shopInfo.address }}</span>
          <div class="center" @click="goToWXAdress">
            <span>{{ shopInfo && shopInfo.distanceToShow }}</span>
            <i class="iconfont icon-all_daohang"></i>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-store">
      <van-cell title="请先选择城市" is-link title-style="text-align:left;" @click="goto" />
    </div>

    <div style="height:4.0625rem"></div>


    <div class="foot" :class="{ 'foot-w375': fun.isPc() }">
      <van-goods-action-icon icon="shop-o" text="首页" @click="gotoHome" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="clickChat" />
      <button class="share-money" @click="postShow">
        <template v-if="share_reward.reward_type == 'commission'">
          <template v-if="share_amount>0">分享赚{{ $i18n.t('money') }}{{ share_amount }}</template>
          <template v-else>分享</template>
        </template>
        <template v-else>
          <template v-if="share_reward.amount >0">分享赚{{ share_reward.amount }}{{ share_reward.name }}</template>
          <template v-else>分享</template>
        </template>
      </button>
      <button class="buy" @click="buy">
        <template v-if="order_reward.reward_type == 'balance'">
          <template v-if="amount >0">下单送{{ $i18n.t('money') }}{{ amount }}</template>
          <template v-else>下单</template>
        </template>
        <template v-else>
          <template v-if=" order_reward.amount  >0">下单送{{ order_reward.amount }}{{ order_reward.name }}</template>
          <template v-else>下单</template>
        </template>
      </button>
    </div>
    <div style="width: 375px; top: 450px; position: fixed;">
      <div class="poster" @click="postShow">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png" alt />
      </div>
    </div>

    <!-- 海报 -->
    <yz-goodsposter v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}"
      :defaultImg="!isFrontCanvas ? posterImg : ''" plugin_name="meituan" :goodstype="true"></yz-goodsposter>
    <!-- 客服 -->
    <cservice-popup :show="isShowChat" :cservice="cservice" :service_mobile="service_mobile"
      :service_QRcode="service_QRcode" @close="isShowChat = false"></cservice-popup>

  </div>
</template>

<script>

import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import cservicePopup from "components/goods/children/plugin/cservicePopup";
import { Toast } from "vant";
export default {
  components: { cservicePopup, yzGoodsposter },
  data() {
    return {
      discount: "",
      group_code: {},
      dealBaseInfo: {},
      couponInfo: {},
      shopInfo: {},
      amount: 0,
      share_amount: 0,



      posterShow: false,
      isFrontCanvas: true, //是否前端控制生成海报，false为后端生成
      posterImg: null,
      page: 1,
      current_index: 0,

      detail: {},
      latitude: 0,
      longitude: 0,
      address: "",

      service_QRcode: "",
      service_mobile: "",
      cservice: "",
      isShowChat: false,

      cate_id: "",//一级分类id
      dealid: "",

      city_name: "",
      city_id: "",
      point: {},
      order_reward: {},
      share_reward: {},

    };
  },
  activated() {
    this.init();
    let city_id = localStorage.getItem('meituan_city_id');
    let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
    if (city_id && this.$route.query.city) {//城市选择器页进入
      this.city_id = city_id;
      this.city_name = this.$route.query.city;
        this.getData();
    } else if (this.$route.query.cate_id) {
      if (city_id) {
        this.city_id = city_id;
      }
      if (!this.$route.query.lng) {
        if (myLoaction) {
          this.get_city_id(myLoaction.city)
        }
      }else{
        this.getData();
      }
    } else if (myLoaction) {
      this.get_city_id(myLoaction.city)
    }


  },
  methods: {
    get_city_id(name) {
      $http.post('plugin.meituan-group-buy.frontend.good.city', { name }, '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let datas = res.data;
        let city_id;
        for (let item in datas) {
          city_id = datas[item][0].id;
        }
        this.city_id = city_id;

        window.localStorage.setItem('meituan_city_id', city_id)
        this.getData();
      })
    },
    goto() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "meituan", path: "detail" }))
    },
    init() {
      this.city_name = "";
      let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      if (this.$route.query.cate_id) {
        this.cate_id = this.$route.query.cate_id;
        if (this.$route.query.cate_idy) {
          localStorage.setItem('meituanCategory', JSON.stringify({ "cate_id": this.$route.query.cate_id }));
        }
      } else {
        let meituanCategory = JSON.parse(localStorage.getItem('meituanCategory'));
        this.cate_id = meituanCategory.cate_id;
      }
      if (this.$route.query.dealid) {
        this.dealid = this.$route.query.dealid;
        if (this.$route.query.dealid) {
          localStorage.setItem('meituan_dealid', JSON.stringify({ "dealid": this.$route.query.dealid }));
        }
      } else {
        let meituan_dealid = JSON.parse(localStorage.getItem('meituan_dealid'));
        this.dealid = meituan_dealid.dealid;
      }
      if (this.$route.query.city) {
        this.city_name = this.$route.query.city;
      }
      if (this.$route.query.lng&&this.$route.query.lat) {
        this.point.lng = this.$route.query.lng;
        this.point.lat = this.$route.query.lat;
      }else if(myLoaction){
        this.point = myLoaction.point;
        this.city_name = myLoaction.city;
      }
    },
    getData() {
      let json = {
        first_cate_id: this.cate_id,
        dealid: this.dealid,
        sort: 1,
        geo_info: {}
      };
      if (this.point.lat || this.point.lng) {
        json.geo_info.lat = this.point.lat;
        json.geo_info.lng = this.point.lng;
      }
      if (this.city_id) {
        json.geo_info.cityId = this.city_id;
      }

      $http.post("plugin.meituan-group-buy.frontend.good.good", json, "").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let records = res.data.records[0] || {},
          cservice = res.data.good_detail.cservice || {},
          group_code = res.data.good_detail.group_code || {};
        if (records) {
          this.couponInfo = records.couponInfo;
          this.shopInfo = records.shopInfo;
          let _dealBaseInfo = records.dealBaseInfo;
          console.log(_dealBaseInfo, "_dealBaseInfo=====");
          if (_dealBaseInfo) {
            this.dealBaseInfo = _dealBaseInfo;
            this.defaultPic = _dealBaseInfo.defaultPic;
            this.share_amount = _dealBaseInfo.share_reward.amount;
            this.amount = _dealBaseInfo.order_reward.amount;
            this.share_reward = _dealBaseInfo.share_reward;
            this.order_reward = _dealBaseInfo.order_reward;
          }
        }
        if (cservice) {
          this.service_QRcode = cservice.service_QRcode;
          this.service_mobile = cservice.service_mobile;
          this.cservice = cservice.cservice;
        }

        this.group_code = group_code || {};

      })
    },

    buy() {
      window.open(this.couponInfo.couponPageUrl, "_blank")
    },
    postShow() {
      if (!this.fun.isTextEmpty(this.posterImg)) {
        this.posterShow = true;
      } else {
        let toastPoster = Toast({
          duration: -1, // 持续展示 toast
          message: "正在为您生成海报中"
        });
        let url = "";
        let Jons = {};
        this.isFrontCanvas = false;
        this.isFrontCanvas = true;
        url = "plugin.meituan-group-buy.frontend.poster.get-poster";

        Jons.id = this.dealid;
        $http
          .get(url, Jons, "")
          .then(response => {
            toastPoster.clear();
            if (response.result == 1) {
              // isFrontCanvas 是否需要前端生成海报
              this.posterImg = this.isFrontCanvas ? response.data : `${response.data.image_url}?${Date.now()}`;
              this.posterShow = true;
            } else {
              this.posterShow = false;
              this.$dialog.alert({ message: response.msg });
            }
          })
          .catch(error => {
            toastPoster.clear();
            console.log(error);
          });
      }
    },

    clickChat() {
      let setServicePlugin = this.fun.isTextEmpty(this.service_mobile) && this.fun.isTextEmpty(this.service_QRcode);
      if (this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        return this.$toast("抱歉，暂未设置客服信息");
      }
      if (!this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        //只设置了客服链接，直接跳转
        if (this.cservice && this.cservice.indexOf("chatWindow") >= 0) {
          window.location.href = this.cservice + "&goods_id=" + this.goods_id;
        } else {
          window.location.href = this.cservice;
        }
        return;
      }
      this.isShowChat = true;

    },
    gotoHome() {
      this.$router.push(this.fun.getUrl('meituan_refund'))
    },
    // 群活码跳转
    toGroupCode() {
      if (this.group_code.jump_mode === "home") {
        this.$router.push(this.fun.getUrl("groupCode"));
      } else if (this.group_code.code_url) {
        window.location.href = this.group_code.code_url;
      }
    },
    goToWXAdress() {
      let point = {
        lat: this.point.lat * 1,
        lng: this.point.lng * 1
      }
      this.fun.goToWXAdress(point, this.shopInfo.address)
    },
  }
};
</script>

<style scoped lang="scss">
.poster {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20.4rem;
  top: 65%;

  img {
    width: 100%;
    height: 100%;
  }
}

.recommend-reason {
  text-align: center;
  font-weight: bold;
  font-size: 0.9375rem;
  margin-bottom: 0.9063rem;
  height: 0.9375rem;
  line-height: 0.9375rem;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-ht_operation_copyline,
.icon-jk_haibao {
  width: 2.7188rem;
  height: 2.7188rem;
  line-height: 2.7188rem;
  color: #fff;
  background: #E7AA45;
  border-radius: 3.125rem;

}

.share-popup-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.close {
  position: absolute;
  right: 5%;
  top: 5%;
}

.overlay-detail {
  display: flex;

}

.overlay-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .link-content {
    margin-top: 1.0625rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
    color: #999;
    font-size: 0.75rem;
  }
}

.overlay-block {
  position: relative;
  width: 17.5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 1.25rem 0.625rem;

}

.foot-w375 {
  width: 375px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.foot {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 3.0625rem;
  background-color: #fff;
  padding: 0.2813rem 0.625rem;
  display: flex;
  align-items: center;
}

.buy {
  min-width: 8rem;
  background-color: #F15353;
  color: #fff;
  font-size: 0.9375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 0rem 1.25rem 1.25rem 0rem;
  border: unset;
}

.share-money {
  min-width: 8rem;
  background-color: #F58686;
  color: #fff;
  font-size: 0.9375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 1.25rem 0rem 0rem 1.25rem;
  border: unset;
}

.store-title {
  text-align: center;
  margin-bottom: 0.9063rem;
  margin-top: 1.0313rem;
  font-weight: bold;
  font-size: 0.9375rem;
}

.center {
  display: flex;
  align-items: center;
}

.no-store {
  background-color: #fff;
  border-radius: 0.625rem;
  overflow: hidden;
  margin: 0.625rem 0.75rem;
}

.store-box {
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.625rem 0.75rem;
  padding: 0.75rem;
  display: flex;

  .icon-all_daohang {
    font-size: 1.25rem;
    color: #F15353;
    margin-left: 0.3125rem;
  }

  .store-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    margin-top: 0.3125rem;
  }

  .store-box-right {
    flex: 1;
  }

  .store-type {
    color: #F96D20;
    border-radius: 0.3125rem;
    font-size: 0.75rem;
    padding: 0.1875rem 0.3438rem;
    margin-right: 0.375rem;
    margin-top: 0.375rem;
    box-sizing: border-box;
    background-color: #FFF0E8;
  }

  .store-name {
    text-align: left;
    font-size: 0.9375rem;
    font-weight: bold;
  }

  .store-box-left {
    width: 4.375rem;
    height: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;

    img {
      width: 100%;
      // height: 100%;
      border-radius: 0.625rem;
    }
  }

}

/* 群活码 */
.group-code {
  display: flex;
  align-items: center;
  text-align: left;
  background-color: #fff;
  padding: 0.6rem;
  border-radius: 0.3125rem;
  margin: 0.6rem;

  .group-code-face {
    width: 2.5rem;
    height: 2.5rem;

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
  }

  .group-code-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 2rem;
    padding-right: 1rem;
    padding-left: 0.5rem;
    line-height: 1.125rem;

    .group-code-name {
      font-size: 0.9375rem;
      font-weight: 500;
      color: #00001C;
    }

    .group-code-desc {
      font-size: 0.8125rem;
      color: #6E6E79;
    }
  }

  .group-code-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    background-color: #ff9600;
    border-radius: 0.75rem;
  }
}

.content {
  margin: 0.625rem 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: #fff;

  .original-price {
    margin-top: 0.625rem;
    text-align: left;
    color: #AAAAB3;
    font-size: 0.6875rem;
  }

  .content-title {
    font-size: 1rem;
    font-weight: bold;
    color: #00001C;
    margin-bottom: 0.75rem;
    text-align: left;
  }

  .wrap {
    display: flex;
    width: 100%;
    height: 3rem;
    background: #FFF5F5;
    border-radius: 0.75rem;
  }

  .wrap-right {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 60%;
    font-size: 0.8125rem;
    color: #F15353;
  }

  .wrap-line {
    width: 0.625rem;
    height: 0.0938rem;
    background-color: #F15353;
  }

  .nav {
    width: 40%;
    height: 100%;
    position: relative;
    // background-image:url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image%2Fpreferential_bg.png") no-repeat center ;
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .fz-20 {
    font-size: 0.625rem;
  }

  .c-fff {
    color: #fff;
  }

  .left {
    text-align: left;
  }

  .nav-bottom {
    display: flex;
    align-items: center;
    margin-top: .3rem;
    color: #fff;
    z-index: 6;
    position: relative;
  }

  .preferential {
    position: relative;
    color: #fff;
    font-size: 0.75rem;
    text-align: left;
    line-height: 1;
    z-index: 5;
  }

  .ttt {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 0.75rem;
    padding: 0.3rem 1rem 0;
    z-index: 10;
    box-sizing: border-box;


  }

  // .ttt-bg {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   z-index: -1;
  //   background-color: #F15353;
  //   border-bottom: none;
  //   border-radius: 10px 13px 0 10px;
  //   transform: perspective(70px) rotateX(5deg);
  //   transform-origin: left;
  //   box-sizing:border-box;
  // }

  // .ttt::before {
  //   content: "";
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   z-index: -1;
  //   background-color: #F15353;
  //   border-bottom: none;
  //   border-radius: 10px 13px 0 10px;
  //   transform: perspective(70px) rotateX(5deg);
  //   transform-origin: left;
  // }

  .fz-41 {
    font-size: 1.3rem;
  }

  .bold {
    font-weight: bold;
  }

  .discount {
    font-size: 10px;
    border: 1px solid #fff;
    padding: 0 0.2188rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    margin-left: 0.1875rem;
    height: 0.8125rem;
    line-height: 0.8125rem;
  }
}

.reason {
  background: #FFFFFF;
  border-radius: 0.5rem;
  margin: 0.625rem 0.75rem;
  padding: 1.0625rem 0.75rem;
}
</style>
